<template>
    <div id="vip_list">
        <el-form :inline="true" size="medium">
			<el-form-item>
				<el-select v-model="params.status" placeholder="类型" clearable @change="search">
                    <el-option value="1" label="正常vip"></el-option>
					<el-option value="2" label="自定义vip"></el-option>
				</el-select>
			</el-form-item>
           
			<el-form-item>
				<el-button type="primary" @click="search">搜索</el-button>
				<el-button @click="otOperation()">新增vip</el-button>
			</el-form-item>
		</el-form>

        <el-table :data="list" stripe v-loading="loading">
            <el-table-column align="center" label="类型">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == 1">正常vip</span>
                    <span v-if="scope.row.status == 2">自定义vip</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="等级名称" prop="name"></el-table-column>
            <el-table-column align="center" label="升级邀请人数" prop="condition_num"></el-table-column>
            <el-table-column align="center" label="升级费用" prop="upgrade_amount"></el-table-column>
            <el-table-column align="center" label="超重续费价（元/kg）" prop="rise"></el-table-column>
            <el-table-column align="center" label="优惠" prop="discount"></el-table-column>
            <el-table-column align="center" label="默认会员">
                <template slot-scope="scope">
                    <span v-if="scope.row.isDefault == 0">否</span>
                    <span v-if="scope.row.isDefault == 1">是</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间">
                <template slot-scope="scope">
                    {{$common.getDate(scope.row.create_time)}}
                </template>
            </el-table-column>
            <el-table-column>
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click=otOperation(scope.row)>修改</el-button>
                    <el-button v-if="scope.row.is_default === 0" type="danger" size="small" @click="deleteInfo(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination 
			class="page"
			background
			@size-change="handleSizeChange" 
			@current-change="getList" 
			:current-page.sync="params.pageNo" 
			:page-sizes="[10, 20, 50, 100]" 
			:page-size="params.pageSize" 
			layout="total, sizes, prev, pager, next, jumper" 
			:total="total">
		</el-pagination>

        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            @close="closeDialog"
            width="600px"
            center>
            <div class="form">
                <div class="form-item">
                    <div class="label">等级名称：</div>
                    <div class="form-input">
                        <el-input v-model="form.name"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">邀请指定人数：</div>
                    <div class="form-input">
                        <el-input v-model="form.condition_num"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">升级费用：</div>
                    <div class="form-input">
                        <el-input v-model="form.upgrade_amount"></el-input>
                    </div>
                </div>
                <!-- <div class="form-item">
                    <div class="label">超重续费价：</div>
                    <div class="form-input">
                        <el-input v-model="form.rise"></el-input>
                    </div>
                </div> -->
                <div class="form-item">
                    <div class="label">优惠：</div>
                    <div class="form-input">
                        <el-input v-model="form.discount"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">状态：</div>
                    <div class="form-input">
                        <el-select v-model="form.status">
                            <el-option
                                label="正常vip"
                                :value="1">
                            </el-option>
                            <el-option
                                label="自定义vip"
                                :value="2">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">备注：</div>
                    <div class="form-input">
                        <el-input v-model="form.remark"></el-input>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            params: {
                status: '',
                startTime: '',
                endTime: '',
                isCount: true,
                pageNo: 1,
                pageSize: 10,
                tenantid:sessionStorage.getItem('tenantid')
            },
            form: {
                name: '',
                condition_num: '',
                upgrade_amount: '',
                rise: '',
                discount: '',
                remark: '',
                status: 1,
                tenantid:sessionStorage.getItem('tenantid')
            },
            list: [],
            timeArr: [],
            loading: false,
            dialogVisible: false,
            title: '新增',
            total: 100
        }
    },
    created(){
        this.getList()
    },
    mounted(){},
    watch: {},
    methods: {
        handleSizeChange(e){
            this.params.isCount = true
            this.params.pageSize = e
            this.getList()
        },
        deleteInfo(id){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                this.$request.post({
                    url: '/ReportApi/tenant/vipleveldel',
                    params: {
                        id
                    },
                    success: res => {
                        this.$message.success('操作成功')
                        this.getList()
                    },
                    finally:() => {
                        loading.close()
                    }
                })
            }).catch(() => {
                this.$message.defaultMsg('操作取消')
            })
            
        },
        search(){
            this.params.pageNo = 1
            this.params.isCount = true
            this.getList()
        },
        closeDialog(){
            this.form = {
                name: '',
                condition_num: '',
                upgrade_amount: '',
                rise: '',
                discount: '',
                is_default: '',
                remark: '',
                status: 1
            }
        },
        otOperation(row){
            if(row){
                this.title = '修改'
            }else{
                this.title = '新增'
            }
            this.dialogVisible = true
            this.form = Object.assign({},this.form,row)
        },
        submit(){
            if(this.form.name == ''){
                this.$message.warning('等级名称不能为空')
                return
            }
            if(this.form.condition_num == ''){
                this.$message.warning('邀请指定人数不能为空')
                return
            }
            if(this.form.upgrade_amount == ''){
                this.$message.warning('升级费用不能为空')
                return
            }
            // if(this.form.rise == ''){
            //     this.$message.warning('超重续费价不能为空')
            //     return
            // }
            if(this.form.discount == ''){
                this.$message.warning('优惠不能为空')
                return
            }
            delete this.form.create_time
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.$request.post({
                url: '/ReportApi/tenant/viplevelupdateadd',
                params:{
                    from:this.form,
                }, 
                success: res => {
                    this.$message.success('操作成功')
                    this.dialogVisible = false
                    this.getList()
                },
                finally:() => {
                    loading.close()
                }
            })
        },
        timeChange(val){
            if(val){
                this.params.startTime = this.$common.getDate(val[0]);
                this.params.endTime = this.$common.getDate(val[1]);
            }else{
                this.params.startTime = ''
                this.params.endTime = ''
            }
        },
        getList(){
            this.loading = true
            this.$request.post({
                url:'/ReportApi/tenant/viplevellist',
                params: this.params,
                success: res => {
                    this.list = res[0]
                    if (this.params.isCount) {
                        this.params.isCount = false
                        this.total = res[1]
                    }
                },
                finally: res => {
                    this.loading = false
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
#vip_list{
    .form{
        .form-item{
            display: flex;
            align-items: center;
            margin-top: 10px;
            .label{
                width: 100px;
                text-align: right;
                margin-right: 10px;
            }
            .form-input{
                width: 300px;
                .el-select{
                    width: 100%;
                }
            }
            .form_image{
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
                i{
                    font-size: 28px;
                    color: #8c939d;
                    width: 100px;
                    height: 100px;
                    line-height: 100px;
                    text-align: center;
                }
            }
            .img_wrap{
                width: 100px;
                height: 100px;
                cursor: pointer;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .el-pagination{
        text-align: right;
        padding-top: 20px;
    }
}
</style>